<template>
    <div>
        <table border="1">
            <thead>
                <tr>
                    <th>异常地址</th>
                    <th>异常信息</th>
                    <th>Exception message</th>
                    <th>解决方案</th>
                    <th>查看方案</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(v, i) in tableListArr" :key="v.exceptId">
                    <td>{{ v.addrPlc }}</td>
                    <td>{{ v.exceptMessageCn }}</td>
                    <td>{{ v.exceptMessage }}</td>
                    <td class="look_play">
                        <div class="left" @click="seleCtClick(v)" v-if="v.planList">
                            <!-- 1111 -->
                            {{ v.planList.length ? v.planList[0].description : '' }}
                        </div>
                        <div class="right" @click="right_icon_click(v)">
                            <img v-if="v.addrPlc || v.exceptMessageCn || v.exceptMessage"
                                src="../../../../assets/imgx/add_num.png" alt="">
                        </div>
                        <div @mouseleave="moModelBox" class="solcingMask"
                            :style="{ 'display': v.exceptId == exceptId ? 'block' : 'none' }">
                            <div v-for="(item, index) in planListdata" :key="index">{{ item.description }}</div>
                        </div>
                    </td>
                    <td @click="look_play_item(v)" style="cursor: pointer;text-align: center;" class="casdf"> <span
                            v-if="v.addrPlc || v.exceptMessageCn || v.exceptMessage">查看</span></td>
                    <td style="text-align: center;"> <span class="span" style="cursor: pointer" @click="editClick(v)"
                            v-if="v.addrPlc || v.exceptMessageCn || v.exceptMessage">编辑</span>
                        <span class="span" style="cursor: pointer" @click="editDelClick(v)"
                            v-if="v.addrPlc || v.exceptMessageCn || v.exceptMessage">删除</span>
                    </td>
                </tr>
            </tbody>
        </table>
        <div v-show="isbool1" style="position: absolute;top: 30%; left: 30%;">
            <determineBox @delBtnFun="delBtnFun" @oneDelBtnFun="oneDelBtnFun" @errorBtnFun="errorBtnFun" />
        </div>
    </div>
</template>
<script>
import { getPlanPageByExcepId, editExcept_del_api } from '@/api/fulitModelApi/index.js'

export default {
    props: ["tableListArr"],
    components: {
        determineBox: () => import("@/components/determine/index.vue")

    },
    data() {
        return {
            planListdata: [],
            exceptId: "",
            isbool: false,
            isbool1: false,
            pkIds:""
        }
    },

    methods: {
        //删除接口
        moModelBox() {
            this.planListdata = [];
            this.exceptId = '111111';
        },
        delBtnFun() {
            editExcept_del_api({
                pkIds: this.pkIds
            }).then(res => {
                console.log(res);
                if (res.code !== 200) {
                    this.$emit("errorTitle", res)
                    this.isbool1 = false;

                } else{
                    this.isbool1 = false;
                    this.$emit("deltTable")
                }
            })
        },
        oneDelBtnFun() {
            this.isbool1 = false
        },
        errorBtnFun() {
            this.isbool1 = false

        },
        editDelClick(item) {
            this.pkIds = Number(item.exceptId)
            this.isbool1 = true

        },
        editClick(item) {
            this.$emit("edit_btn_fun", item)
        },
        seleCtClick(item) {
            this.exceptId = item.exceptId;
            if (this.planListdata.length) {
            } else {
                item.planList.forEach(element => {
                    if (element !== null) {
                        this.planListdata.push(element)
                    }
                });

            }




        },
        right_icon_click(item) {
            this.$emit("right_icon_fun", item)
        },
        look_play_item(v) {
            this.$emit("look_programme_fun", v)
            this.exceptId = '111111';

        },

    },
}
</script>
<style lang="less" scoped>
.el-pagination {

    .btn-next,
    .btn-prev {
        border: 0px !important;
    }

}

table {
    width: 100%;
    background: linear-gradient(60deg, #021130 0%, #010D2A 100%);
    opacity: 1;
    border: 0.01333rem solid rgba(4, 123, 181, 0.52);
    border-collapse: collapse;
    font-size: 10px;

    thead {
        width: 1572px;
        color: white;

        tr {

            height: 40px;
            color: white;
            font-size: 13px;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: #FFFFFF;
            background: rgba(11, 111, 189, 0.48);
            border: 1px solid #2B7BB5;
            border: 0.01333rem solid rgba(4, 123, 181, 0.52);

            th {
                color: white;
                text-align: left;
                width: 10%;
            }
        }

    }

    tbody {
        width: 1572px;
        color: white;

        tr {
            border: 0.01333rem solid rgba(4, 123, 181, 0.52);
            height: 44px;


            td {
                color: white;
                font-size: 14px;
                text-align: left;
                font-size: 13px;
                font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                font-weight: 400;
                color: #FFFFFF;
                padding-left: 10px;


                span {
                    display: inline-block;
                    padding: 10px;
                    line-height: 40px;
                }

            }
        }

        tr:nth-child(even) {
            background: rgba(11, 111, 189, 0.22) !important;


            td {
                color: white;
            }
        }

    }

}

.look_play {
    display: flex;
    align-items: center;
    border: 0px;
    position: relative;
    height: 100%;
    justify-content: space-between;
    line-height: 58px;

    .solcingMask {
        width: 465px;
        height: 188px;
        overflow: auto;
        box-shadow: 10px 7px 32px 7px #011A41;
        position: absolute;
        top: 50px;
        left: 0px;
        z-index: 1000;
        background: linear-gradient(360deg, #021130 0%, #010D2A 100%);
        opacity: 1;
        border: 1px solid #00469C;

        div {
            width: 100%;
            height: 40px;

        }

    }

    .left {
        width: 300px;
        display: flex;
        font-size: 14px;

        img {
            width: 16px;
            height: 11px;
            margin: 10px 5px 3px 20px;
        }
    }

    .right {
        cursor: pointer;


        img {
            width: 19.44px;
            margin: -4px 10px;
            cursor: pointer;

        }
    }
}

.casdf {
    cursor: pointer;

}
</style>